<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import useCommonStore from '~/store/common'

const commonStore = useCommonStore()
const route = useRoute()
const defaultActive = computed(() => route.fullPath)
const menus = ref<MyNav[]>([
  {
    name: '首页',
    icon: 'i-ep-home-filled',
    path: '/',
  },
  {
    name: '表格',
    icon: 'i-ep-grid',
    path: '/mytable',
  },
  {
    name: '系统管理',
    icon: 'i-ep-setting',
    path: '/system',
    type: 'menu',
    children: [
      {
        name: '用户管理',
        icon: 'i-ep-user-filled',
        path: '/system/user',
      },
      {
        name: '角色管理',
        icon: 'i-ep-stamp',
        path: '/system/role',
      },
      {
        name: '菜单管理',
        icon: 'i-ep-menu',
        path: '/system/menu',
      },
    ],
  },
])

const flattenMenus = computed<MyNav[]>(() => {
  const result: MyNav[] = []
  menus.value.forEach((item) => {
    if (item.type === 'menu' && item.children) {
      item.children.forEach((child) => {
        if (child.type === 'menu' && child.children) {
          child.children.forEach((childLast) => {
            result.push({
              ...childLast,
              parent: child.path,
            })
          })
        }
        result.push({
          ...child,
          parent: item.path,
        })
      })
    }
    result.push(item)
  })
  return result
})

function setNavList(path: string) {
  let navList: MyNav[] = []
  const nav = flattenMenus.value.find(item => item.path === path)
  if (nav) {
    navList = [nav]
    let parentPath = nav.parent
    while (parentPath) {
      const parentNav = flattenMenus.value.find(item => item.path === parentPath)
      if (parentNav) {
        navList.unshift(parentNav)
        parentPath = parentNav.parent
      }
      else {
        break
      }
    }
  }
  commonStore.setNavList(navList)
}
function handleSelect(key: string) {
  setNavList(key)
  addVisitedPage(key)
}
function addVisitedPage(path: string) {
  const nav = flattenMenus.value.find(item => item.path === path)
  if (nav)
    commonStore.addVisitedPage(nav)
}

onMounted(() => {
  setNavList(defaultActive.value)
  addVisitedPage(defaultActive.value)
})
</script>

<template>
  <el-menu router :default-active="defaultActive" class="my-side-menu" @select="handleSelect">
    <div style="height: 50px;" class="flex items-center justify-start text-light" pl-3>
      <div i-ep-element-plus text-4 />
      <span ml1 text-3>前端模板</span>
    </div>
    <template v-for="item in menus" :key="item.path">
      <el-menu-item v-if="!item.type" :index="item.path">
        <div :class="item.icon" mr1 />
        <template #title>
          {{ item.name }}
        </template>
      </el-menu-item>
      <el-sub-menu v-else-if="item.type === 'menu'" :index="item.path">
        <template #title>
          <div :class="item.icon" mr1 />
          {{ item.name }}
        </template>
        <template v-for="child in item.children" :key="child.path">
          <el-menu-item v-if="!child.type" :index="child.path">
            <div :class="child.icon" mr1 />
            <template #title>
              {{ child.name }}
            </template>
          </el-menu-item>
          <el-sub-menu v-else-if="child.type === 'menu'" :index="child.path">
            <template #title>
              <div :class="child.icon" mr1 />
              {{ child.name }}
            </template>
            <el-menu-item v-for="childLast in child.children" :key="childLast.path" :index="childLast.path">
              <div :class="childLast.icon" mr1 />
              <template #title>
                {{ childLast.name }}
              </template>
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<style lang="scss" scoped>
.my-side-menu {
  --ep-menu-bg-color: #2e4053;
  --ep-menu-text-color: #ffffff;
  --ep-menu-active-color: #ffffff;
  --ep-menu-hover-bg-color: #3c5b7a;
  height: 100%;
  .ep-sub-menu {
    --ep-menu-bg-color: #34495e;
  }
  .ep-menu-item {
    &.is-active {
      // background-color: #21354a;
      background-color: #718ca1;
    }
  }
}
</style>
